<template>
  <view class="page-default">
    <c-nav-bar title="团关系" type="white" bg-color="rgba(255,255,255,0.6)" />

    <view class="mx-2 rounded-lb-4 rounded-rb-4 pb-4">
      <view class="m-3 mt-6 rounded-2 bg-white px-4 line-height-6">
        <up-form ref="form1" label-position="left" label-width="auto" :model="model1" :rules="rules">
          <up-form-item ref="item1" label="政治面貌" prop="userInfo.name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                政治面貌
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input border="none" placeholder="请输入政治面貌" />
          </up-form-item>
          <up-form-item ref="item1" label="团员编号" prop="userInfo.name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                团员编号
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input border="none" placeholder="请输入团员编号" />
          </up-form-item>
          <up-form-item ref="item1" label="准考证号" prop="userInfo.name" :border-bottom="false">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                入团时间
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
        </up-form>
      </view>

      <view class="mx-8 mb-2">
        <u-button size="default" shape="circle" class="gradient-button mb-8 mt-8" @click="goNextPage">
          <text class="text-base text-white">
            提交
          </text>
        </u-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// 响应式表单数据
const dataForm = ref({
  name: '',
  birthday: '',
});

// 校验规则
const rules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change'],
    },
  ],
};

const show = ref(false);
const columns = reactive([
  ['中国', '美国', '日本'],
]);
</script>

<style lang="scss" scoped>
:deep(.u-line){
 border-bottom: 2px dashed #e0e7ec !important;
}

:deep(.uni-input-input){
  text-align: right;
}
:deep(.uni-input-placeholder ){
  text-align: right;
}
:deep(.uni-textarea-textarea){
  color: #000000;
}
:deep(.u-form-item__body__left__content__label){
  color: #6E7B8B;
}
</style>
